<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过 Prop 向子组件传递数据</title>
</head>

<script src="node_modules/vue/dist/vue.js"></script>

<body>
<h1>通过 Prop 向子组件传递数据</h1>
<p>Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。</p>
<div id="blog-demo">
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
    <blog-post title="Why Vue is so fun"></blog-post>
</div>

<hr>
<h1>动态赋值</h1>
<div id="blog-post-demo">
    <!-- v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class-->
    <blog-post
            v-for="post in posts"
            v-bind:id="post.id"
            v-bind:title="post.title"
    ></blog-post>
</div>

</body>
<script>

    /**
     * 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
     */
    Vue.component('blog-post', {
        props: ['title','id'],
        template: '<h3>{{ id }} <span v-if="id>0"> === </span>   {{ title }}</h3>'
    })

    new Vue({
        el:"#blog-demo"

    });

    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' }
            ]
        }
    })


</script>
</html>

